<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>采集明细</title>
    <script src="/js/echarts.min.js"></script>
    <script src="/js/jquery-3.7.0.min.js"></script>
</head>
<body>
<input type="hidden" id="gwDate" th:value="${gwDate}" />
<input type="hidden" id="gwOI" th:value="${gwOI}" />
<input type="hidden" id="gwMeterAddr" th:value="${gwMeterAddr}" />
<div id="main" style="width:100%;height:100%;"></div>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    myChart.setOption(
{
  title: {
    text: '日明细表'
  },
  tooltip: {
    trigger: 'axis'
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  legend: {},
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    axisLabel:{
      fontSize:12,
      interval: 2,
      rotate: 30
    },
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      name: '在线状态',
      type: 'line',
      stack: 'Total',
      data: [1, 1, 0, 1, 0, 1, 1]
    },

  ]
}
    );
</script>
<script type="text/javascript">
    function run() {
        var url='/api/v1/data/foobar/' + document.getElementById("gwDate").value + '/' + document.getElementById("gwMeterAddr").value;
        $.getJSON(url).done(function(json) {
            myChart.setOption({
                xAxis: {
                    axisLabel:{
                      interval: json.xAxisInterval
                    },
                    data: json.labs
                },
                series: [{
                    name: json.name,
                    data: json.vals
                }]
            });
        });
    }
    setTimeout(function () {
        run();
    }, 0);
    setInterval(function () {
        run();
    }, 60000);
</script>
</body>
</html>